<template>
  <ep-advance-card title="路由相关" class="m-b-20" theme="theme-1">
    <ep-input v-model="input1"></ep-input>
    <ep-button @click="openTab">打开 多页面form</ep-button>
    <ep-button @click="openTab1">打开 多页面详情-1</ep-button>
    <ep-button @click="openTab2">打开 多页面详情-2</ep-button>
    <ep-button @click="closeTab">关闭当前tab</ep-button>
    <ep-button @click="closeTab1">关闭tab1</ep-button>
    <ep-divider></ep-divider>
    <ep-button @click="repalceTab">replace当前tab</ep-button>
    <ep-button @click="resetTab">重置当前tab</ep-button>
    <ep-button @click="resetTab1">重置 多页面详情-1</ep-button>
    <!-- <ep-button>获取所有打开tab</ep-button> -->
    <ep-divider></ep-divider>
    <ep-input v-model="input2"></ep-input>
    <ep-button @click="setTabTitle">改变当前tab标题</ep-button>
    <ep-button @click="setTabTitle2">改变多页面详情-1的标题</ep-button>
    <ep-divider>老框架方法测试</ep-divider>
    <ep-input v-model="input3"></ep-input>
    <ep-button @click="oldChunkTab1">chunk-tab</ep-button>
    <ep-button @click="oldChunkTab2">chunk-tab-2</ep-button>
  </ep-advance-card>
</template>

<script>
export default {
  data() {
    return {
      input2: '新标题',
      // input1: '/chunk/helloWorld2'
      input1: '/multiPageDemo',
      input3: '/hello1'
    }
  },

  methods: {
    openTab() {
      this.$app.$emit('open-tab', {
        path: this.input1
      })
    },
    openTab1() {
      this.$app.$emit('open-tab', {
        path: '/multiPageDemo/1',
        query: {
          name: 'ep'
        }
      })
      // this.$app.$emit('open-tab', '/multiPageDemo/2')
    },
    openTab2() {
      this.$app.$emit('open-tab', '/multiPageDemo/2')
    },
    closeTab() {
      this.$app.$emit('close-tab')
    },
    closeTab1() {
      this.$app.$emit('close-tab', '/multiPageDemo/1')
    },
    repalceTab() {
      this.$app.$emit('replace-tab', this.input1)
    },
    resetTab() {
      this.$app.$emit('reset-tab')
    },
    resetTab1() {
      this.$app.$emit('reset-tab', '/multiPageDemo/1')
    },
    setTabTitle() {
      this.$app.$emit('set-tab-title', this.input2)
    },
    setTabTitle2() {
      this.$app.$emit('set-tab-title', '改后的标题-1', this.input2)
    },
    oldChunkTab1() {
      this.$app.trigger('chunk-tab', this.input3)
    },
    oldChunkTab2() {
      this.$app.trigger('chunk-tab-2', this.input3)
    }
  }
}
</script>

<style></style>
